<html>

<head>
    <meta charset="utf-8">
    <title>鼠标移入移出</title>
    <style>
        .div1 {
            width: 150px;
            height: 150px;
            border: 10px solid #000;
            cursor: crosshair;
            margin: 0 auto;
            background: #000;
            color: #fff;
        }

        .hover {
            width: 150px;
            height: 150px;
            color: red;
            margin: 0 auto;
            cursor: crosshair;
            background: #f0f0f0;
            border: 10px solid red;
        }
    </style>

    <script>
        window.onload = function (){
            var oDiv = document.getElementById("o");
            oDiv.onmouseover = function(){
                oDiv.className = "hover";
            }
            oDiv.onmouseout = function(){
                oDiv.className = "div1";
            }
        }
    </script>
</head>

<body>
    <div class="div1" id="o">
        鼠标移入改变样式，鼠标移出恢复
    </div>
</body>

</html>